<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动化case编写</title>
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        boby {
            text-align: center;
        }

        #center_div {
            margin: 0 auto;
            border: 1px solid #000;
            margin-top: 200px;
            width: 500px;
        }

        #center_div_1 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 350px;
            height: 80px;

        }

        #center_div_h1 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 350px;
            height: 60px;
            margin-bottom: 100px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: black;
            transition: background-color 1000ms linear;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        footer {
            position: absolute;
            height: 50px;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: right;
            padding: 10px;
            color: grey;
            font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
        }

    </style>
    <style>
        html {
            font-size: 62.5%;
        }

        body {
            font: normal 100% Arial, sans-serif;
            font-size: 14px;
            font-size: 1.4rem;
        }

        #div_boby {
            background-color: green;
            width: 1500px;
            position: fixed;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            left: 200px;
            right: 200px;

        }

        #input_case_url {
            height: 25px;
            width: 800px;
            text-align: center;
            margin-left: 100px;
        }

        #input_case_type {
            height: 25px;
            width: 250px;
            text-align: center;
            margin-left: 50px;
        }

        #input_case_token {
            height: 200px;
            width: 250px;
            text-align: center;
            margin-left: 10px;
        }

        #input_case_headers {
            height: 200px;
            width: 250px;
            text-align: center;
            margin-left: 10px;
        }

        #input_case_data {
            height: 200px;
            width: 250px;
            text-align: center;
            margin-left: 10px;
        }

        #div_lift {
            float: left;
        }

        #input_label {
            margin-left: 5%;
            margin-top: 2%;
            text-align: center;
        }
    </style>

</head>
<body>
<canvas id="main"></canvas>
<canvas id="middle"></canvas>
<canvas id="final"></canvas>

<div>
    <div id="div_boby" style="margin-top: 20px;">
        <div style="text-align: center">
            <div>
                <p id="div_lift">
                    <label for="url" style="color:red;" id="input_label">接口地址:
                        <textarea type="text" id="input_case_url"
                                  name="url"
                                  placeholder="请输入接口地址" cols="50"
                                  rows="50"></textarea>
                    </label>
                </p>
                <p id="div_lift">
                    <label for="url" style="color:red;" id="input_label">请求类型:
                        <input type="text" id="input_case_type"
                               name="url"
                               placeholder="请输入请求类型">
                    </label>
                </p>
            </div>
            <div id="div_lift" style="margin-left: 200px">
                <p id="div_lift">
                    <label for="token" style="color:red;" id="input_label">token:
                        <textarea type="text"
                                  id="input_case_token"
                                  name="token"
                                  placeholder="请输入token" cols="50"
                                  rows="50"></textarea>
                    </label>
                </p>
                <p id="div_lift">
                    <label for="headers" style="color:red;" id="input_label">headers:
                        <textarea type="text"
                                  id="input_case_headers"
                                  name="headers"
                                  placeholder="请输入json类型的headers" cols="50" rows="50"></textarea>
                    </label>
                </p>
                <p id="div_lift">
                    <label for="data" style="color:red;" id="input_label">boby:
                        <textarea type="text"
                                  name="data"
                                  id="input_case_data"
                                  placeholder="请输入json类型的body" cols="50" rows="50"></textarea>
                    </label>
                </p>
                <p id="div_lift">
                    <button style="height: 60px;width: 100px;margin-left: 80px;margin-top: 130px;border: 1px solid"
                            onclick="check1()">提交
                    </button>
                </p>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://api.douchacha.com/api/s.js"></script>
        <script>
            function check1(var1) {
                var input_case_url = document.getElementById("input_case_url")
                var input_case_type = document.getElementById("input_case_type")
                {#var input_case_token = document.getElementById("input_case_token")#}
                {#var input_case_headers = document.getElementById("input_case_headers")#}
                var input_case_data = document.getElementById("input_case_data")

                input_case_url.value = "https://api.test.douchacha.com/api/tiktok/live/list_hour?sign=df-dcc"
                input_case_type.value = "GET"
                input_case_token.value = "eyJhbGciOiJIUzI1NiJ9.eyJ0eXBlIjoiUEMiLCJleHAiOjE2Mjk4MDMwMTEsInVzZXJJZCI6MTI4MzQwMTg1NjQwODQ1NzIxNywiY3JlYXRlRGF0ZSI6IjIwMjEtMDgtMjMgMTk6MDM6MzEifQ.BOOPuINOT0U-_rtI9cH3kCOoiKcsXVU33D1qa6JoMhs"
                {#input_case_headers.value = '{"Accept": "application/json, text/plain, */*","Accept-Encoding": "gzip, deflate, br","Accept-Language": "zh-CN,zh;q=0.9","Cache-Control": "no-cache","Connection": "close","Content-Length": "77","Content-Type": "application/json;charset=UTF-8","d-t": "","dcc-href": "https://test.douchacha.com/","dcc-r": "https://test.douchacha.com/","Host": "api.test.douchacha.com","Origin": "https://test.douchacha.com","Pragma": "no-cache","Referer": "https://test.douchacha.com/", "Sec-Fetch-Dest": "empty","Sec-Fetch-Mode": "cors","Sec-Fetch-Site": "same-site","User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36",}'#}
                input_case_data.value = '{"phone": "18900000134","password": "e252ba01bf6a505c330cbb3eb58645fca69dfe4a"}'

                {#console.log(input_case_headers)#}
                if (input_case_url.value == "" || input_case_type.value == "" || input_case_data.value == "") {
                    alert("账号或密码为空，请重新填写")
                } else {
                    var ar = parseInt(var1);
                    caselist_s = JSON.stringify($(input_case_data).val());
                    {#jQuery.support.cors = true;#}
                    jQuery.ajax(
                        {
                            type: "GET",
                            url: "http://localhost:8100/polls/case_url/",
                            data: {
                                input_case_url:input_case_url.value,
                                input_case_type:input_case_type.value,
                                caselist_s
                            },
                            success: function (data) {
                                alert(11111111)
                            }
                        })
                }
            }
        </script>

    </div>

</div>


<script>
    // mouse
    const mouse = {
        x: 0,
        y: 0,
        prevX: 0,
        prevY: 0,
        dead: false,
        right() {
            return this.x >= this.prevX;
        }
    };
    const movements = [" touchstart", "mousemove", "touchmove"];
    const leaves = ["touchend", "mouseleave", "mouseout"];

    function updateMouse(x, y) {
        mouse.prevX = mouse.dead ? 0 : mouse.x;
        mouse.prevY = mouse.dead ? 0 : mouse.y;

        mouse.x = x;
        mouse.y = y;
    }

    function setUpEvent() {
        movements.forEach((move) => {
            window.addEventListener(move, function (event) {
                event.preventDefault();
                const {x, y} = getMousePos(canvas, event, mouse);
                mouse.dead = false;
                updateMouse(x, y);
            });
        });
        leaves.forEach((move) => {
            window.addEventListener(move, function (event) {
                event.preventDefault();
                updateMouse(0, 0);
                mouse.dead = true;
            });
        });
    }

    ///https://levelup.gitconnected.com/using-prototype-vs-this-in-a-javascript-class-can-help-save-memory-816636418c3e
    const colors = [
        {
            canvas: document.getElementById("main"),
            context: document.getElementById("main").getContext("2d"),
            drops: [],
            color: "#00FFFC",
            speed: 1.5,
            radius: 1
        },
        {
            canvas: document.getElementById("middle"),
            context: document.getElementById("middle").getContext("2d"),
            drops: [],
            color: "#FC00FF",
            speed: 2,
            radius: 2
        },
        {
            canvas: document.getElementById("final"),
            context: document.getElementById("final").getContext("2d"),
            drops: [],
            color: "#fffc00",
            speed: 2.5,
            radius: 3
        }
    ];

    const triadic = ["#00FFFC", "#FC00FF", "#fffc00"];

    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum
        is
        inclusive
    }

    const canvas = document.getElementById("main");
    const middle = document.getElementById("middle");
    const final = document.getElementById("final");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    middle.width = window.innerWidth;
    middle.height = window.innerHeight;
    final.width = window.innerWidth;
    final.height = window.innerHeight;

    class Drop {
        constructor(color, yVelocity, radius, current) {
            this.xPos = Math.random() * (window.innerWidth - 20);
            this.yPos = Math.random() * 20;
            this.fallSpeed = Math.random() * 0.5 + 0.5 + yVelocity;
            this.radius = radius;
            this.color = color;
            this.end = false;
            this.canvas = current;
            this.xDirection = 0;
        }
    }

    //
    Drop.prototype.draw = function drawDrop() {
        // console.log(this.y);
        // console.log(this.color)
        let radius = this.radius;
        let current = this.canvas;
        current.beginPath();

        current.moveTo(this.xPos - radius, this.y);

        if (this.xDirection !== 0) {
            current.arc(this.xPos, this.yPos, radius, 0, 2 * Math.PI);
        } else {
            current.lineTo(this.xPos, this.yPos - 20);
            current.lineTo(this.xPos + radius, this.y);

            current.arc(this.xPos, this.yPos, radius, 0.25 * Math.PI, 0.75 * Math.PI);
        }

        current.fillStyle = this.color;
        current.closePath();
        current.fill();
        return this;
    };
    //
    Drop.prototype.fall = function dropFall() {
        this.yPos += this.fallSpeed;
        this.xPos += this.xDirection;
        if (this.xDirection === 0) {
            this.xDirection = 0;
        } else if (this.xDirection < 0) {
            this.xDirection += 0.02;
        } else {
            this.xDirection -= 0.02;
        }
        if (this.yPos >= window.innerHeight + this.radius) {
            this.end = true;
        }
        return this;
    };
    let check = false;

    function checkCollision(drop, touch) {
        // if(check){
        // return;
        // }
        if (touch.dead) {
            return;
        }
        if (
            drop.xPos > touch.x &&
            drop.yPos > touch.y &&
            drop.xPos < touch.x + 25 &&
            drop.yPos < touch.y + 25
        ) {
            drop.yPos -= 5;
            drop.yVelocity *= -5;
            drop.xDirection = touch.right() ? -5 : 5;
            drop.color = "white";
            // alert("!");
        }
        // console.log(drop.xPos, touch.x);
        check = true;
        return drop.xPos === touch.x && drop.yPos === touch.y;
    }

    function updateDrops(array, cb) {
        for (let i = array.length - 1; i >= 0; i--) {
            array[i].fall();
            if (array[i].end === true) {
                // start - start of position to make change
                // delete - 1 from the index we passed in
                array.splice(i, 1);
            }
        }
        if (array.length < window.innerWidth / sizeFactor) {
            cb();
        }
    }

    function getMousePos(current, evt) {
        const rect = current.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

    function animate(current, yVelocity, radius, drops) {
        // fill the canvas with the orange background
        let color = triadic[getRandomIntInclusive(0, triadic.length - 1)];
        current.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.clearRect(0, 0, canvas.width, canvas.height);
        // make all drops fall and then redraw them
        for (let i = 0; i < drops.length; i++) {
            drops[i].fall();
            if (drops[i].end === true) {
                // start - start of position to make change
                // delete - 1 from the index we passed in
                drops.splice(i, 1);
            } else {
                checkCollision(drops[i], mouse);
                drops[i].draw();
            }
        }
        if (drops.length < window.innerWidth / 4) {
            drops.push(new Drop(color, yVelocity, radius, current));
        }
        requestAnimationFrame(() => {
            animate(current, yVelocity, radius, drops);
        });
    }

    const startAnimation = () =>
        requestAnimationFrame(() => {
            for (let element of colors) {
                // console.log(element);
                animate(element.context, element.speed, element.radius, element.drops);
            }
        });
    window.addEventListener("load", () => {
        setUpEvent();
        startAnimation();
    });

    function reset(canvasObject) {
        canvasObject.canvas.width = window.innerWidth;
        canvasObject.canvas.height = window.innerHeight;
        canvasObject.drops = [];
    }

    window.addEventListener("resize", () => {
        for (let element of colors) {
            reset(element);
        }
        startAnimation();
    });
</script>
</body>
</html>
